<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            background: url(five.png) no-repeat;
            background-size: 100%;
        }
        ul,li{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .container{
            width: 100%;
            display: flex;
        }
        .container .left{
            width: 70%;
            /* background: blueviolet; */
            border:1px solid;
        }
        .container .right{
            width: 30%;
            /* background: red; */
            border:1px solid;

        }
        .container .ul{
            display: flex;
            flex-wrap: wrap;
        }
        .container .ull{
            display: flex;
            flex-wrap: wrap;
        }
        .container .ull li{
            width: 28%;
            text-align: center;
            height: 40px;
            line-height: 40px;
            background: black;
            opacity: 0.5;
            color:white;
            margin: 10px;
        }
        .container .ul li{
            width: 20%;
            text-align: center;
            height: 40px;
            line-height: 40px;
            background: black;
            opacity: 0.5;

            color:white;
            margin: 10px;
        }
        .container .ul .active{
            font-size: 25px;
            font-weight: 600;
            color:red;
            background: yellow
        }
        #btn{
            width: 150px;
            height: 50px;
            display: block;
            margin: 0 auto;
            border: none;
            background: green;
            color:white;
            font-size: 20px;
            font-weight: 600
        }
        .H1{
            text-align: center
        }
    </style>
    <script src="./lib/react.js"></script>
    <script src="./lib/react-dom.js"></script>
    <script src="./lib/browser.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        function ran(min,max){
				return parseInt(Math.random()*(max-min+1)+min)
        }
        const Style={
            active:{fontSize: "30px",fontWeight: "600",color:"red"},
        }
        class Candidate extends React.Component{
            constructor(props){
                super(props)

            }
            click(){
                var cb = this.props.callBack(this.props.index);
            }
            render(){
                return(<li  className={this.props.class}>
                
                    {this.props.name}

                    <span  onClick={this.click.bind(this)}> X</span>
            
                </li>)
            }
        }
        class APP extends React.Component{
            constructor(props){
                super(props)
                this.state={
                    num:[
                    "张志阳","尹彪彪","王永豪","谢忠宁","程然","申柯",
                        "郭振男","梁蓓研","姜晓航","赵勃斌","张金龙","杨骐鸣",
                        "向博","刘学雷","黄友君","弓嗣荣","李梦雪","檀清华",
                        "许金豪","郭峰军","倪聪","王迪","屈娇秀","朱恬恬",
                        "徐朝阳","李佳豪","段秉君","范俊丹","张业博","盖鑫鑫",
                        "刘瑞","鲁明文","朱增光","王曼","王晓东","李俊杰",
                        "赵胜杰","柳旭","张明凯","吕艳琴","刘世奇","张艳强"],
                    numtwo:[],
                    name:"en",
                    titme:null,
                    selectIndex:null,
                    isLike:false,
                    winners:[]
                }
                this.delFunc = this.delFunc.bind(this);

            }
            componentDidMount(){
                let students = this.state.num;

                 students = students.map( (st,index) => {
                    return <Candidate callBack={this.delFunc}  index={index}  key={index}  name={st}  class="item" />
                })

                this.setState({
                    numtwo:students
                })
            }
           
            
            delFunc(index){
                    console.log('del:',index)

                    var students = this.state.num;
                    students.splice(index,1);
                    students = students.map( (st,index) => {
                        return <Candidate  callBack={this.delFunc} index={index}  key={index}  name={st}  class="item" />
                    })

                    this.setState({
                        numtwo:students
                    })
                    
            }
             // 添加名字
            add(){
                var name = this.refs.iptname.value;
                if(name){
                    let students = this.state.num;
                    console.log(students.includes(name))
                    if(!students.includes(name)){
                        students.push(name);
                    }else{
                        alert("添加过了")
                    }
                    let renderStu = students.map( (st,index) => {
                        return <Candidate callBack={this.delFunc} index={index} key={index}  name={st}  class="item" />
                    })
                    this.setState({
                        students:students,
                        numtwo:renderStu
                    })
                    this.refs.iptname.value = ""
                }
            }
            // 开始滚动
            start(){
                var sam=0
                var titme=setInterval(()=>{
                    sam++
                    // let ran=ran(0,this.state.num.length-1)
                    var ran = Math.floor(Math.random()*this.state.num.length);
                    let stu=this.state.num.map((st,index)=>{
                        if(ran==index){
                            this.setState({
                                selectIndex:index
                            })
                            return <Candidate callBack={this.delFunc} index={index} key={index}  name={st}  class="active" />
                        }else{
                            return <Candidate callBack={this.delFunc} index={index} key={index}  name={st}  class="" />
                        }
                    })
                    this.setState({
                        numtwo:stu
                    })
                    if(sam==20){
                        var index = this.state.selectIndex;
                        var students = this.state.num;
                        var winner = students[index]
                        var winners = this.state.winners;

                        students.splice(index,1);
                        winners.push(winner);
                        this.setState({
                            winners:winners,
                            students:students
                        })

                        clearInterval(titme)

                    }
                },100)
                this.setState({
                    titme:titme
                })
            }
            render(){
                let winner = this.state.winners;
                winner = winner.map( (w,i) =>{
                    return (<li key={i}>{w}</li>) 
                })
                return (
                    <div>
                        <div className="container">
                            <div className="left">
                                <ul className="ul">{this.state.numtwo}</ul>
                                <button id="btn" onClick={this.start.bind(this)}> 开始 </button>    
                            </div>
                            <div className="right">
                                <h1 className="H1">被选召的孩子们！！！</h1>
                                <ul className="ull">
                                        {winner}
                                </ul>
                            </div>
                        </div>

                        <div>
                            <input ref="iptname" />
                            <button onClick={this.add.bind(this)}> 添加 </button>
                        </div>
                    </div>
                )        
            }
        }
        
        ReactDOM.render(<APP/>,document.getElementById("root"))

    </script>
</body>
</html>